<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/static/layui/css/layui.css">
  <title>Document</title>
</head>

<body>
  <div style="padding-left: 20px;padding-top: 20px;">
    <span class="layui-breadcrumb">
      <a href="/dashBoard">首页</a>
      <a><cite>商品列表</cite></a>
    </span>
    <div style="margin-top:20px">
      <a href="/itemAdd" class="layui-btn layui-btn-warm">增加商品</a>
    </div>
    <table class="layui-table layui-form">

      <thead>
        <tr>
          <th>商品名称</th>
          <th>价格</th>
          <th>描述</th>
          <th>销量</th>
          <th>库存</th>
          <th>上下架</th>
          <th>封面图片</th>
          <th>上架时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <% for(var i=0;i<items.length; i ++) { %>
          <tr>
            <td>
              <%= items[i].name %>
            </td>
            <td>￥<%= items[i].price %>
            </td>
            <td title="<%= items[i].desc %>">
              <%= items[i].desc ? (items[i].desc.length>10? items[i].desc.substr(0, 10)+ '...': items[i].desc) :'暂无描述'
                %>
            </td>
            <td>
              <%= items[i].sale %>
            </td>
            <td>
              <%= items[i].store %>
            </td>
            <td>
              <input type="checkbox" disabled <%=items[i].onSale==='1' ?'checked':'' %> name="zzz" lay-skin="switch"
              lay-text="上架|下架"/>
            </td>
            <td>
              <img width="100"
                src="<%=items[i].thumb?items[i].thumb:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.51qianduan.com%2Fpublic%2Fimages%2Ffooter_nopic.jpg&refer=http%3A%2F%2Fwww.51qianduan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650177634&t=00fa1149864328fd32b0dc4e84dde5d9' %>"
                alt="">
            </td>
            <td>
              <%= items[i].createAt %>
            </td>
            <td>
              <a href="/itemUpdate?id=<%= items[i]._id %>" class="layui-btn layui-btn-xs">编辑</a>
              <button data-id="<%= items[i]._id %>" class="layui-btn del layui-btn-danger layui-btn-xs">删除</button>
            </td>
          </tr>
          <%}%>

      </tbody>
    </table>
    <div id="page"></div>
  </div>
  <script src="/static/layui/layui.js"></script>
  <script>
    layui.use(['laypage', 'jquery', 'layer'], function () {
      var laypage = layui.laypage;
      // 删除商品
      var $ = layui.jquery;
      var layer = layui.layer;

      // 删除商品
      $('.del').click(function () {
        // 弹出确认框 点击确认删除
        var _this = this;
        layer.confirm('您确认删除商品吗?', { icon: 3, title: '温馨提示' }, function (index) {
          //do something
          $.ajax({
            url: '/deleteItem',
            data: {
              _id: _this.dataset.id
            },
            success: function(res){
              if(res.code === 200) {
                layer.msg(res.msg, {icon:1, time: 1000}, function(){
                  history.go(0)
                })
              }else{
                layer.msg(res.msg, {icon:2})
              }
            }
          })
          layer.close(index);
        });
      })
      // 渲染分页组件
      laypage.render({
        elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
        , count: <%= count %> //数据总数，从服务端得到
        , limit: 2
        , curr: <%= page %>
        , jump: function (obj, first) {
        // first 参数代表是不是首次打开当前页面
        // obj 中 curr当前页 limit 一页要几条数据
        // 如何在代码中改变地址栏地址  location.href

        //首次不执行
        if (!first) {
          //do something
          location.href = "/itemList?page=" + obj.curr + "&pageSize=" + obj.limit;
        }
      }
      });
    })
  </script>
</body>

</html>